<template name="AssessScoresEchart">
	<view class="qiun-charts">
      <uni-ec-canvas 
		v-if="!forceUseOldCanvas"
          class="uni-ec-canvas"
          id="uni-ec-canvas-scores"
          ref="uni-ec-canvas-scores"
          canvas-id="uni-ec-canvas-scores"
          :ec="ec"
		  :forceUseOldCanvas="false"
       ></uni-ec-canvas>
	   <uni-ec-canvas
			v-else
	       class="uni-ec-canvas"
	       id="uni-ec-canvas-scores1"
	       ref="uni-ec-canvas-scores1"
	       canvas-id="uni-ec-canvas-scores1"
	       :ec="ec"
	   		  :forceUseOldCanvas="true"
	    ></uni-ec-canvas>
	   <view style="margin-left: 60rpx;align-self: flex-start;">
	   	<view class="item">
	   		<view style="background-color: #A3F680;" class="item-color"></view>
			<view v-if="dimensionScoresCompare.length > 0" style="background-color: #3AC300; margin-left: 10rpx;" class="item-color"></view>
	   		<text class="item-name">超常</text>
	   		<text>130分及130分以上</text>
	   	</view>
	   	<view class="item">
	   		<view style="background-color: #DDFD30;" class="item-color"></view>
			<view v-if="dimensionScoresCompare.length > 0" style="background-color: #A1BF00; margin-left: 10rpx;" class="item-color"></view>
	   		<text class="item-name">优秀</text>
	   		<text>115分——129分</text>
	   	</view>
	   	<view class="item">
	   		<view style="background-color: #FFFF00;" class="item-color"></view>
			<view v-if="dimensionScoresCompare.length > 0" style="background-color: #D1B500; margin-left: 10rpx;" class="item-color"></view>
	   		<text class="item-name">正常</text>
	   		<text>85分——114分</text>
	   	</view>
	   	<view class="item">
	   		<view style="background-color: #FFAB00;" class="item-color"></view>
			<view v-if="dimensionScoresCompare.length > 0" style="background-color: #EE9500; margin-left: 10rpx;" class="item-color"></view>
	   		<text class="item-name">落后</text>
	   		<text>70分——84分</text>
	   	</view>
	   	<view class="item">
	   		<view style="background-color: #FF8E00;" class="item-color"></view>
			<view v-if="dimensionScoresCompare.length > 0" style="background-color: #DD5900; margin-left: 10rpx;" class="item-color"></view>
	   		<text class="item-name">偏低</text>
	   		<text>69分——69分以下</text>
	   	</view>
	   </view>
	   <view class="switch-view">
			<view>桌面版:</view>
			<u-switch size="30" @change="switchClick" active-color="#B5DB7D" v-model="forceUseOldCanvas">桌面版</u-switch>
	   </view>
    </view>
</template>

<script>
	import uniEcCanvas from "../js_sdk/echarts-for-wx/uni-ec-canvas/uni-ec-canvas.vue";
	import utils from '../utils/utils.js'
	let barColors = ['#FF8E00', '#FFAB00','#FFFF00', '#DDFD30', '#A3F680','#f0f0f0']
	let barColors1 = ['#DD5900', '#EE9500','#D1B500', '#A1BF00', '#3AC300','#f0f0f0']
	export default {
		components: {
			uniEcCanvas
		},
		name: "AssessScoresEchart",
		props:{
			dimensionScores:{
				type: Array,
				default () {
					return []
				}
			},
			
			dimensionScoresCompare:{
				type: Array,
				default () {
					return []
				}
			},
			
			useOldCanvas:{
				type: Boolean,
				default () {
					return false
				}
			},
		},
		
		data() {
			return {
				ec: {
					option : {},
				},
				forceUseOldCanvas: false,
			}
		},
		
		created() {
			this.forceUseOldCanvas = this.useOldCanvas;
			this.initData();
		},
		
		methods: {
			switchClick(status) {
				if (this.forceUseOldCanvas) {
					setTimeout(()=>{
						this.$refs['uni-ec-canvas-scores1'].init()
					},500) // 两秒之后延迟加载
				} else {
					setTimeout(()=>{
						this.$refs['uni-ec-canvas-scores'].init()
					},500) // 两秒之后延迟加载
				}
			},
			getResult(value,barColors){
			    let color = '';
			    let str = ''
			    if(value < 70){
			        color = barColors[0];
			        str = '偏低'
			    }else if(value < 85){
			        color = barColors[1]
			        str = '落后'
			    }else if(value < 115){
			        color = barColors[2]
			        str = '正常'
			    }else if(value < 130){
			        color = barColors[3]
			        str = '优秀'
			    }else{
			        color = barColors[4]
			        str = '超常'
			    }
			    return {color,str}
			},
			
			
			initData() {
				const that = this;
				let label=[],devArr = [],devArrCompare = [];
				let totalScore = 0;
				var seriesArray = [];
	
				this.$props.dimensionScores.map(x=>{
				    if(x.dimensionId === '2c92848567977b50016797a129d909b4'){
				        return
				    }
				    totalScore += parseFloat(x.dqFraction);
				    label.push(x.dimensionName);
				    devArr.push({
				        value:parseFloat(x.dqFraction.toFixed()),
				        itemStyle:{
				            color:this.getResult(x.dqFraction,barColors).color
				        },
				        label:{
				            show: true, 
				            position:'inside',
							color: '#333333'
				        }
				    })
				})
				
				
				if (this.$props.dimensionScoresCompare.length > 0){
					this.$props.dimensionScoresCompare.map(x=>{
					    if(x.dimensionId === '2c92848567977b50016797a129d909b4'){
					        return
					    }
					    devArrCompare.push({
					        value:parseFloat(x.dqFraction.toFixed()),
					        itemStyle:{
					            color:this.getResult(x.dqFraction,barColors1).color
					        },
					        label:{
					            show: true, 
					            position:'inside',
								color: '#333333'
					        }
					    })
					})
					seriesArray[0] = {
							barGap: 0,
							data: devArr,
							type: 'bar',};
					seriesArray[1] = {
							data: devArrCompare,
							type: 'bar',};
				}else{
					label.push('综合评价')
					let ava = totalScore/devArr.length;
					devArr.push({
					    value:parseFloat(ava.toFixed(0)),
					    itemStyle:{
					        color:this.getResult(ava,barColors).color
					    },
					    label:{
					        show:true, 
					        position:'inside',
							color: '#333333'
					    }
					})
					seriesArray[0] = {
							barGap: 0,
							data: devArr,
							type: 'bar',};
				}
				
				var option = {
					title:{
					    text:'发育商',
					    textStyle:{
					        fontSize:14,
					        color: '#50576a'
					    },
					    left:'center',
					    top:0
					},
					color:barColors,
					// tooltip: {
					//     trigger: 'axis',
					//     axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					//         type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					//     },
					// 	formatter: '{b0}: {c0}<br />{b1}: {c1}{c2}{c3}{c4}{c5}'
					// },
					dataZoom: [
						{
							preventDefaultMouseMove: false
						}
					],
					legend: {
						selectedMode : false
					},
					grid: {
					    top:40,
						left: '3%',
						right: '4%',
						bottom: '3%',
					    containLabel: true
					},
				    xAxis: {
				        type: 'category',
				        data: label,
				        axisLabel:{
				            rotate:45,
							fontSize:10,
				        }
				    },
				    yAxis: {
						axisLabel:{
						    show:true,
							fontSize:10,
						},
				        type: 'value',
						max: 150,
						min: 0,
				    },
				    series: seriesArray
				};

				this.ec.option = option;
				setTimeout(()=>{
					if (this.forceUseOldCanvas) {
						this.$refs['uni-ec-canvas-scores1'].init()
					} else {
						this.$refs['uni-ec-canvas-scores'].init()
					}
				},500) // 两秒之后延迟加载
			}
		}
	}
</script>

<style>
	
	.qiun-charts {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.uni-ec-canvas {
	  width: 700upx;
	  height: 700upx;
	  display: block;
	}
	
	.item{
		display: flex;
		flex-direction: row;
		color: #50576a;
		font-size: 24rpx;
		align-items: center;
		margin-top: 5rpx;
	}
	
	.item-color{
		width: 30rpx;
		height: 30rpx;
	}
	
	.item-name{
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	
	.switch-view{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-right: 40rpx;
		width: 100%;
	}
</style>
